<template>
  <div class="tnaot">
    <!-- <div v-if="showModal" class="tanchuang">
      <div class="close" @click="closeModal">x</div>
      <div id="gax-inpage-async-1741749717"></div>
      <div id="gax-inpage-async-1741077142"></div>
    </div> -->

    <div v-if="showIframe" class="iframe-modal">
      <div class="iframe-background" @click="closeIframe"></div>
      <div class="ad-container">
        <div class="close-btn" @click="closeIframe">
          <div class="close-btn-text"></div>
        </div>
        <iframe
          class="ad-iframe"
          src="https://tnaot.com/ad5.html"
          frameborder="0"
        ></iframe>
      </div>
    </div>
    <IndexHeader :isIndex="true" :showLang="true" />
    <Tabs :channelList="channelList" />
    <div class="Banner">
      <jump-banner :banner-list="bannerList" />
    </div>

    <div class="ad-box" style=" width:auto; margin: 0 auto; text-align:center;">
      <iframe
        frameborder="0"
        scrolling="no"
        style="width: 355px; height: 270px; overflow: hidden;  margin-left: 0px;  "
        class="ad-iframe"
        src="https://tnaot.com/adpcmr1.html"
      ></iframe>
    </div>

    <div v-for="(item, index) in news" :key="'top-' + index">
      <NuxtLink
        v-if="item.is_top === 1 && item.showType != 2"
        :to="$i18n.path(`${routeWay[item.news_type]}${item.news_id}`)"
        exact
      >
        <Top :top="item" />
      </NuxtLink>
      <a
        v-if="item.is_top === 1 && item.showType === 2"
        :href="item.sourceUrl"
        target="_blank"
      >
        <Top :top="item" />
      </a>
    </div>
    <van-list
      v-if="news && news.length > 0"
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      :error-text="$t('Request_failed_click_to_upload_again')"
      :finished-text="$t('No_more')"
      @load="getList"
      :immediate-check="false"
    >
      <div v-for="(item, index) in news" :key="index">
        <NuxtLink
          v-if="item.is_top != 1 && item.showType != 2"
          :to="$i18n.path(`${routeWay[item.news_type]}${item.news_id}`)"
          exact
        >
          <Item :news="item" />
        </NuxtLink>
        <a
          v-if="item.is_top != 1 && item.showType === 2"
          :href="item.sourceUrl"
          target="_blank"
        >
          <Item :news="item" />
        </a>
      </div>
    </van-list>
    <div class="no-data" v-if="news && news.length < 1">
      {{ $t('No_more') }}
    </div>
  </div>
</template>

<script>
import IndexHeader from '@/components/m/Header.vue';
import Tabs from '@/components/m/Tabs.vue';
import JumpBanner from '@/components/JumpBanner.vue';
import Top from '@/components/m/Top.vue';
import Item from '@/components/m/item.vue';
import { mapState } from 'vuex';
import { pick } from '@/utils/helper';
import { mergeSeoHead } from '@/seo/index';

export default {
  components: {
    IndexHeader,
    Tabs,
    JumpBanner,
    Top,
    Item
  },

  data() {
    return {
      channelList: [], //频道列表
      bannerList: {}, //
      news: [], //资讯列表
      loading: false, //列表加载
      finished: false, //列表加载完毕
      error: false, //列表加载错误
      lastnewsTime: '', //本页一条新闻的时间戳
      routeWay: {
        1: 'm/detail/article/',
        2: 'm/detail/gallery/',
        3: 'm/detail/video/'
      },
      showModal: true,
      randomNumber: 0,
      showIframe: true
    };
  },

  head() {
    const head = {
      title: this.$t('tnaot_title'),
      meta: [{ property: 'og:type', content: 'website' }]
    };
    return mergeSeoHead(
      head,
      this.$getMainSeoHead({
        title: this.$t('tnaot_title'),
        image: 'https://m.tnaot.com/img/logo-256.png',
        url: 'https://m.tnaot.com/' + this.locale + '/m',
        keyword: this.$t('indexKeywords'),
        description: this.$t('indexDescription')
      })
    );
  },

  async asyncData(ctx) {
    try {
      const channelData = await ctx.$axios.$get('/article/get_banner_channel', {
        params: { imageType: 0 }
      });
      const channelList = pick('result.channel_list')(channelData);
      const defaultChannelId = pick('0.id')(channelList);
      const channelNewsDataP = ctx.$axios.$get('/article/get_channel_list', {
        params: { channelId: defaultChannelId }
      });
      const bannerDataP = ctx.$axios.$get('/article/get_banner_list', {
        params: { lan: ctx.store.getters.localeFull, sourceType: 16 }
      });

      const channelNewsData = await channelNewsDataP;
      const bannerData = await bannerDataP;

      const bannerList = pick('result')(bannerData);
      const newsList = pick('result')(channelNewsData);
      const newsListLength = pick('length')(newsList);
      const lastNewsTime = pick(`${newsListLength - 1}.release_timestamp`)(
        newsList
      );

      ctx.store.commit('SET_CHANNEL', defaultChannelId);
      ctx.store.commit('SET_NEWS_LIST', newsList);

      return {
        channelList,
        bannerList,
        news: newsList,
        lastnewsTime: lastNewsTime
      };
    } catch (err) {
      console.log(err);
      return ctx.error({ statusCode: 404, message: '网络异常，请重试！' });
    }
  },

  computed: {
    ...mapState(['channel', 'channels', 'newsList', 'locale'])
  },

  watch: {
    async channel() {
      //store中是否含有当前tab的数据
      var hasNews = this.newsList.some(item => {
        if (item.channelId == this.channel) {
          this.news = item.news;
          this.lastnewsTime =
            item.news.length > 0
              ? item.news[item.news.length - 1].release_timestamp
              : '';
          return true;
        }
      });

      if (!hasNews) {
        this.$axios.setHeader(
          'lan',
          this.$i18n.locale == 'zh' ? 'zh-Hans' : 'km-KH'
        );
        const { result } = await this.$axios.$get(
          `/article/get_channel_list?channelId=${this.channel}`
        );
        this.news = result;
        this.lastnewsTime =
          this.news.length > 0
            ? this.news[this.news.length - 1].release_timestamp
            : '';
        this.$store.commit('SET_NEWS_LIST', result);
      }
    }
  },
  mounted() {
    const that = this;
    this.randomNumber = new Date().getTime();
    setTimeout(() => {
      that.closeIframe();
    }, 4000);
  },
  methods: {
    closeIframe() {
      this.showIframe = false;
    },
    async getList() {
      this.$axios.setHeader(
        'lan',
        this.$i18n.locale == 'zh' ? 'zh-Hans' : 'km-KH'
      );
      const res = await this.$axios.$get(
        `/article/get_channel_list?channelId=${this.channel}&lastReleaseTime=${this.lastnewsTime}`
      );
      this.loading = false;
      if (res.result.length > 0) {
        this.news = this.news.concat(res.result);
        this.lastnewsTime = this.news[this.news.length - 1].release_timestamp;
      } else {
        this.finished = true;
      }
    },
    closeModal() {
      this.showModal = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.tnaot {
  font-size: 30px;
  background-color: #fff;

  .Banner {
    padding-top: 180px;
    margin-top: 32px;
  }

  .no-data {
    text-align: center;
    color: rgba(12, 12, 28, 0.7);
  }
}
.iframe-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  .ad-container {
    width: 150%;
    height: 1111px;
    // background: white url('~assets/images/download_app.png') center/cover
    //   no-repeat;
    position: relative;
    z-index: 1;
    cursor: pointer;
    .ad-iframe {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 100%;
      background-color: #fff;
    }

    .close-btn {
      position: absolute;
      bottom: -8px;
      right: 50%;
      margin-left: 30px;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
      z-index: 2;
    }

    .ad-content {
      width: 100%;
      height: 100%;
    }
  }
}

.tanchuang {
  position: absolute;
  height: auto;
  z-index: 99999;
  left: 50%;
  top: 18%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.close {
  text-align: right;
  cursor: pointer;
}
</style>
